<template>
  <div>
    <Header ref='header'></Header>

    <div class="container layout layout-margin-top">

      <ol class="breadcrumb">
        <li><a href="/paths/">学习路径</a></li>
        <li class="active"><a href="">{{path.title}}</a></li>
      </ol>

      <div class="row">
        <div class="col-md-9 layout-body">

          <div class="content" style="padding:0px">
            <div class="path-description" style="margin:0px">
              <div class="path-desc-top clearfix"
                   style="background: url('/static/img/1471513740139.png') no-repeat;background-size: cover;">
                <div class="name-total-box clearfix">
                  <div class="col-md-6 col-sm-6 col-md-offset-1 path-name">
                    <h4>{{path.title}}</h4>
                  </div>
                  <div class="col-md-3 col-sm-6 col-md-offset-1 path-total-courses">
                    <span class="total-courses-box">课程 <span class="num">{{path.count_course}}</span></span>
                  </div>
                </div>
                <div class="col-md-10 col-md-offset-1 path-desc-text">{{path.desc}}
                </div>
              </div>
              <div class="path-desc-btm">
                <div class="col-sm-12 col-md-4 clearfix learn-time-div">
                  <div class="col-md-12 text-left need-learn-time">预计需要 <span class="num">{{path.count_length}}</span>
                    小时学习
                  </div>
                </div>
                <div class="col-sm-12 col-md-8  clearfix text-right" style="padding-top:0px">
                  <div class="col-xs-12">

                    <a class="btn btn-path-operation btn-join-path"
                       @click="join_path">
                      <span v-if="is_join">取消加入</span>
                      <span v-else>加入路径</span>
                    </a>

                    <p style="font-size:10px;margin-top:5px">加入获得路径课程更新提醒</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="content">
            <ul class="nav nav-tabs" role="tablist">
              <li role="presentation" :class="{active:tab=='stage'}">
                <a @click="tab='stage'">路径详情</a>
              </li>
              <li role="presentation" :class="{active:tab=='comments'}">
                <a @click="tab='comments'">路径评论({{comments.length}})</a>
              </li>
            </ul>
            <div class="tab-content">
              <!-- 路径列表 -->
              <div  class="tab-pane path-details" :class="{active:tab=='stage'}">
                <div class="details-box">
                  <a href="" class="btn start-btn">开始学习</a>
                  <div v-for="stage in path.stage_set" :key="stage.id">
                    <div class="clearfix text-center path-title-box">
                      <span class="line hidden-xs"></span>
                      <span>{{stage.title}}</span>
                      <span class="line hidden-xs"></span>
                    </div>
                    <div class="row">
                      <div v-for="course in stage.course" :key="course.id" class="col-md-4 col-sm-6  course">
                        <a class="course-box" :href="'/courses/detail/?cid='+course.id">
                          <div class="sign-box">
                            <i class="fa fa-star-o course-follow pull-right" style="display:none"></i>
                          </div>
                          <div class="course-img">
                            <img :alt="course.title" :src="course.img">
                          </div>

                          <div class="course-body">
                            <span class="course-title" data-toggle="tooltip" data-placement="bottom"
                                  :title="course.title">{{course.title}}</span>
                          </div>
                          <div class="course-footer">
                            <span class="course-per-num pull-left">
                              <i class="fa fa-users"></i>
                              {{course.study_num}}
                            </span>
                            <span v-show="course.fee==3" class="course-money pull-right">会员</span>
                          </div>
                        </a>
                      </div>

                    </div>
                  </div>


                  <div class="btn end-pin">完成学习</div>
                </div>
              </div>
              <!-- 路径评论 -->
              <div  class="tab-pane path-comment" :class="{active:tab=='comments'}">
                <div class="comment-box">
                  <div class="comment-form">
                      <div class="comment-form-unlogin" v-if="uid">
                        <textarea style="height: 134px; width: 769px" v-model="comment"></textarea>
                      </div>
                    <div class="comment-form-unlogin" v-else>
                      请
                      <a href="#sign-modal" data-toggle="modal" data-sign="signin"> 登录 </a>
                      后发表评论
                    </div>
                    <div>
                      <span>TO:{{to_nick_name}}</span> <a v-show="to_nick_name" @click="clear_to">X</a>
                      <button style="float: right" @click="send_comment">评论</button>
                    </div>
                  </div>
                  <div class="comment-title">最新评论</div>
                  <div class="comment-list">
                    <div v-for="comment in comments" :key="comment.id" style="margin-bottom: 5px;">
                      <img style="width: 25px" :src="comment.user.img" alt="">{{comment.user.nick_name}}
                      <span v-if="comment.to">&nbsp;回复:<img style="width: 25px" :src="comment.to.user.img" alt="">
                        {{comment.to.user.nick_name}}</span>:{{comment.content}}&nbsp;&nbsp;{{comment.u_time |
                      time_to_before}}
                      <a @click="set_to(comment.id, comment.user.nick_name)">回复</a>
                    </div>
                  </div>
                  <div class="pagination-container"></div>
                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="col-md-3 layout-side">


          <div class="panel panel-default panel-userinfo">
            <div class="panel-body body-userinfo">
              <div class="media userinfo-header">
                <div class="media-left">
                  <div class="user-avatar">

                    <a class="avatar" href="#sign-modal" data-toggle="modal" data-sign="signin">
                      <img class="circle" src="/static/img/logo-grey.png">
                    </a>

                  </div>
                </div>
                <div class="media-body">

                  <span class="media-heading username">欢迎来到实验楼</span>
                  <p class="vip-remain">做实验，学编程</p>

                </div>
              </div>

              <div class="row userinfo-data">

                <hr>
                <div class="btn-group-lr">
                  <a href="#sign-modal" type="button" class="btn btn-success col-md-5 col-xs-6 login-btn"
                     data-toggle="modal" data-sign="signin" @click="login('login')">登录</a>
                  <a href="#sign-modal" type="button"
                     class="btn btn-success col-md-5 col-xs-6 col-md-offset-1 register-btn" data-toggle="modal"
                     data-sign="signup" @click="login('register')">注册</a>
                </div>

              </div>

              <div class="userinfo-footer row">
                <div class="col-md-6 col-xs-6 pos-left">

                  <a href="#sign-modal" data-toggle="modal" data-sign="signin"><span
                    class="glyphicon glyphicon-bookmark"></span> 加入私有课</a>

                </div>
                <div class="col-md-6 col-xs-6 pos-right">
                  <a href="/contribute" target="_blank"><span class="glyphicon glyphicon-send"></span> 我要投稿</a>
                </div>

                <div id="join-private-course" class="modal fade words-ctrl" tabindex="-1" role="dialog">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h4 class="modal-title">加入私有课</h4>
                      </div>
                      <div class="modal-body">
                        <div style="margin:15px 0; font-size: 16px;">输入教师提供的私有课程码可以加入教师的私有课程。</div>
                        <form id="private-course-form" method="POST" action="/courses/join">
                          <div class="form-group">
                            <label for="code">邀请码</label>
                            <input class="form-control" id="code" name="code" type="text" value="">
                            <input name="_csrf_token" type=hidden
                                   value="1483796689##5dfe74a8992e829e903291b65bbbdabafa60f4e1">
                          </div>
                        </form>

                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary"
                                onclick="document.getElementById('private-course-form').submit();">确定
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>


          <HotPaths></HotPaths>

          <div class="side-image side-qrcode">
            <img src="/static/img/ShiyanlouQRCode.png">
            <div class="side-image-text">关注公众号，手机看教程</div>
          </div>

        </div>
      </div>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>
  import Header from '@/components/Header'
  import Footer from '@/components/Footer'
  import HotPaths from '@/components/HotPaths'

  export default {
    name: "Detail",
    components: {Header, Footer,HotPaths},
    data() {
      return {
        pid: '',  // 接收到路径参数, 路径id
        is_join: false, // 是否加入路径
        path: {},  // 路径数据
        uid:'',
        comment:"",
        comments: [],
        to_nick_name: '',  // 回复哪个人
        to_comment_id: '', // 回复哪个评论
        tab: 'stage',  // stage,展示路径   comments, 展示评论
      }
    },
    created() {
      this.pid = this.$route.query.pid
      this.get_paths()
      this.is_join_path()
      this.uid=localStorage.uid,
      this.get_comments()

    },
    methods: {
      login(type){
        this.$refs.header.show(type)
      },
      get_paths() {
        this.axios.get('/paths/' + this.pid + '/').then(res => {
          this.path = res.data
        })
      },
      join_path(){
        this.axios.post('/join_path/',{pid:this.pid}).then(res=>{
          if(res.data.code=='0'){
            alert(res.data.msg)
            this.is_join = !this.is_join
          }else{
            alert(res.data.msg)
          }
        })
      },
      is_join_path(){
        this.axios.get('/join_path/?pid='+this.pid).then(res=>{
          if(res.data.count>0){
            this.is_join = true
          }
        })
      },
      get_comments() {
        //http://127.0.0.1:8000/path_comment/?path=2
        this.axios.get('/path_comment/?path=' + this.pid).then(res => {
          this.comments = res.data
        })
      },
      set_to(cid, nick_name) {
        this.to_nick_name = nick_name
        this.to_comment_id = cid
      },
      clear_to(){
        this.to_nick_name = ''
        this.to_comment_id = ''
      },
      send_comment(){
        this.axios.post('/send_comment_path/',{
          pid:this.pid,
          content: this.comment,
          to: this.to_comment_id
        }).then(res=>{
          alert(res.data.msg)
          this.get_comments()
        })
      }
    },
    filters: {
      time_to_before(value) {
        '2020-12-04T07:03:54.424249Z'
        // n年前 n月前  n天前  n小时前  n分钟前
        // debugger
        var day_str = value  // 发表时间
        var d = new Date(day_str)  // 发表时间 转换成日期格式
        // var d = new Date(Date.parse(day_str))  // 发表时间 转换成日期格式
        var now = new Date()  // 现在时间
        var diff = (now - d ) / 1000   // 差值为秒数
        var year = parseInt(diff/31104000)    // 一年的秒数
        var month = parseInt(diff/2592000)    // 一月的秒数
        var days= parseInt(diff/(60*60*24))   // 一天的秒数
        var hours = parseInt(diff/(60*60))   // 一小时的秒数
        var minutes = parseInt(diff/60)   // 一分钟的秒数
        // if (now.getFullYear() - d.getFullYear() > 0) {
        //   return (now.getFullYear() - d.getFullYear()) + '年前评论'
        // } else if (now.getMonth() - d.getMonth() > 0) {
        //   return (now.getMonth() - d.getMonth()) + '月前评论'
        // } else if (now.getDate() - d.getDate() > 0) {  // getDate  =>  日,   getDay  =>  星期
        //   return (now.getDate() - d.getDate()) + '日前评论'
        // } else if (now.getHours() - d.getHours() > 0) {
        //   return (now.getHours() - d.getHours()) + '小时前评论'
        // } else if (now.getMinutes() - d.getMinutes() > 0) {
        //   return (now.getMinutes() - d.getMinutes()) + '分钟前评论'
        // }
        if(year>0){
          return year+'年前评论'
        }else if(month>0){
          return month+'月前评论'
        }else if(days>0){
          return days+'天前评论'
        }else if(hours>0){
          return hours+'小时前评论'
        }else if(minutes>0){
          return minutes+'分钟前评论'
        }else{
          return '刚刚'
        }
      }
    }
  }
</script>

<style scoped>

</style>